<template>
	<div class="index_wap_header">
		<transition name="navBar">
			<van-nav-bar :title="$route.meta.title" fixed :left-arrow="$route.meta.navBar.leftBtn" @click-left="onClickLeft" v-show="!isSearch">
				<template #right v-if="$route.path=='/home/index'">
					<van-icon name="search" size="18" @click="onSearch()"/>
				</template>
			</van-nav-bar>
		</transition>
		<transition name="search1">
			<van-search
				v-model="search_val"
				show-action
				placeholder="请输入搜索关键词"
				@search="onSearch"
				@cancel="onCancel"
			/>
		</transition>
	</div>
</template>

<script setup lang="ts">
    import { NavBar } from 'vant';
	import { ref } from 'vue'
	import { useRouter } from 'vue-router'
	const router = useRouter()
	const isSearch = ref(false)
	const props = defineProps<{HeaderData:any}>();
	const onClickLeft = () => {
		history.back();
		// setTimeout(()=>{history.go(0)},50)
	}
	let search_val = ref('')
	const toSearch = ()=>{
		// router.push({path:'search'})
		isSearch.value = true
	}
	const onCancel = ()=>{isSearch.value = false}
	const onSearch = (val)=>{router.push({path:'search'})}
</script>

<style lang="scss">
	.index_wap_header{
		position: fixed;left: 0;top: 0;width: 100%;z-index: 999;
		.van-search--show-action{
			padding-top: 5px;padding-bottom: 5px;
			.van-search__content{height: 30px;}
		}
		// .search{
		// 	transform: translateX(100%);
		// }
		/*设置动画*/
		.navBar-enter,
		.navBar-leave-to {
			transform: translateX(-100%);
		}
		.navBar-enter-active,
		.navBar-leave-active{
			transition: 1s;
		}
		.navBar-leave,
		.navBar-enter-to{
			transform: translateX(0%)
		}
	}
</style>